<template>
  <div>
    <button @click="add">新增</button>
    <!-- 
      我们可以给transition设置一个name属性,给当前的动画命名,未来在类名直接使用 name-enter来替换v-enter即可
     -->
    <transition-group tag="ul" name="name">
      <li v-for="(item, index) in list" :key="item">
        {{ item }}
        <button @click="deleteOne(index)">delete</button>
      </li>
    </transition-group>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        list: ["lily", "nancy", "lulu"],
      };
    },
    methods: {
      deleteOne(index) {
        this.list.splice(index, 1);
      },
      add() {
        this.list.unshift(Math.random().toFixed(2));
      },
    },
  };
</script>

<style>
  .box {
    width: 15px;
    height: 15px;
    background-color: rgb(225, 152, 152);
    border-radius: 50%;
  }
  .name-enter,
  .name-leave-to {
    opacity: 0;
  }

  .name-enter-active,
  .name-leave-active {
    transition: all 1s;
  }
  .name-leave-active {
    position: absolute;
  }

  .name-move {
    transition: all 1s;
  }
</style>
